<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{margin:0;padding:0;}
	body{font:8rem "微软雅黑"; padding: 200px;}
	.da{margin:0.2rem;color:#048bcb; position: relative;}
	.da:before,.da:after{
		content:attr(data-da);
		position: absolute;
		top:0;
		left:0;
		transform-origin:left top;/*改变被转换元素的位置 x轴 y轴*/
		-webkit-transform-origin:left top;
		-o-transform-origin:left top;
		-ms-transform-origin:left top;

		transition:all 0.3s ease 0s;

	}
	.da:before{
		color:#14b0fa;
		z-index: 3;
		transform:rotateY(-15deg);
	}
	.da:after{
		color:rgba(0,0,0,0.2);
		transform:scale(1.1,1) rotateY(0deg);
		z-index:2;
	}
	.da:hover:before{
		color:#035177;
		transform:rotateY(-40deg) skew(0deg,1deg);
	}
	.da:hover:after{
		transform:scale(1.1,1) rotateY(-40deg) skew(0deg,20deg);
	}
	</style>

</head>
<body>
	<span class="da" data-da="达">达</span>
	<span class="da" data-da="内">内</span>
	<span class="da" data-da="科">科</span>
	<span class="da" data-da="技">技</span>
</body>
</html>